<template>
    <div>
      <input v-model="firstName" placeholder="输入名">
      <input v-model="lastName" placeholder="输入姓">
      <input v-model="fullNameComputed" placeholder="输入完整姓名">
      <p>名: {{ firstName }}</p>
      <p>姓: {{ lastName }}</p>
      <p>完整姓名: {{ fullNameComputed }}</p>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  
  // 定义名和姓的响应式变量
  const firstName = ref('');
  const lastName = ref('');
  
  // 定义可写计算属性
  const fullNameComputed = computed({
    get() {
      return `${firstName.value} ${lastName.value}`;
    },
    set(newValue) {
      const parts = newValue.split(' ');
      firstName.value = parts[0] || '';
      lastName.value = parts[1] || '';
    }
  });
  </script>